<template>
  <transition>
    <div class="container clearfix">
      <div class="cell-wrapper">
        <div class="cell-title">
          <p class="cell-text" v-text=" article.title"></p>
          <span class="cell-label" v-text="article.publishTime"></span>
        </div>
        <div class="cell-value">
          <mt-badge  type="error" size="small" v-if="article.cmsCategory.indexOf('紧急') > -1">
            {{article.cmsCategory}}
          </mt-badge>
          <mt-badge type="success" size="small" v-else v-text="article.cmsCategory">
          </mt-badge>
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
  export default{
    data(){
      return{

      }
    },
    props:['article']
  }
</script>
<style scoped lang="scss">
  @import '../../base/css/_base';
  .container{
    background: #fff;
    margin: 3px 5px 10px;
    border-radius: 5px;
    .cell-wrapper {
      @include flex-left;
      padding: 10px;
      .cell-title{
        flex: 1;
        .cell-text{
          @include fz(6px);
          width: 100%;
          line-height: 24px;
          text-overflow:ellipsis;
        }
        .cell-label{
          @include fz(4px)
        }
      }
      .cell-value {
        align-self: center;
        vertical-align: middle;
      }
    }
  }
</style>
